<div class="monitor-tab-div">
	<!-- 基本信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>基本信息</span>
		</div>
		<div class="m-panel-body base-info-div">
			<form class="bs-example form-horizontal xs-form">
	            <div id="base_info_monitor_div">
	                <div class="form-group">
	                    <label class="col-lg-2 control-label">监控器名称：</label>
	                    <label class="col-lg-4 control-label tl" data-id="monitorName"></label>
	                    <label class="col-lg-2 control-label">监控器类型：</label>
	                    <label class="col-lg-4 control-label tl" data-id="monitorType"></label>
	                </div>
	            </div>

	            <div id="base_info_asset_div">
	                <div class="form-group" style="height:0;padding:0"></div>
	                <div class="form-group">
	                    <label class="col-lg-2 control-label">被监控资产名称：</label>
	                    <label class="col-lg-4 control-label tl" data-id="assetName"></label>
	                    <label class="col-lg-2 control-label">资产类型：</label>
	                    <label class="col-lg-4 control-label tl" data-id="assetTypeName"></label>
	                </div>

	                <div class="form-group">
	                    <label class="col-lg-2 control-label">IP：</label>
	                    <label class="col-lg-4 control-label tl" data-id="mainIp"></label>
	                    <label class="col-lg-2 control-label">管控域：</label>
	                    <label class="col-lg-4 control-label tl" data-id="securityDomainName"></label>
	                </div>

	                <div class="form-group">
	                    <label class="col-lg-2 control-label">操作系统：</label>
	                    <label class="col-lg-4 control-label tl" data-id="osTypeName"></label>
	                    <label class="col-lg-2 control-label" style="display: none;">物理位置：</label>
	                    <label class="col-lg-4 control-label tl" data-id="locationCbName" style="display: none;"></label>
	                </div>

	                <div class="form-group">
	                    <label class="col-lg-2 control-label">数据库版本：</label>
	                    <label class="col-lg-4 control-label tl" data-id="version"></label>
	                    <label class="col-lg-2 control-label"></label>
	                    <label class="col-lg-4 control-label tl"></label>
	                </div>
	            </div>
	        </form>
		</div>
	</div>
	
	<!-- 实例 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>DB2数据库实例信息</span>
		</div>
		<div class="p10">
			<select class="form-control input-sm" data-type="select" id="instance_sel"></select>
		</div>
		<div class="m-panel-body" id="instance_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="instance_list">查询表空间</li>
				</ul>
			</div>
			<div class="table-div" id="instance_list_div" style="height:300px"></div>
		</div>
	</div>

	<!-- 表空间 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>表空间</span>
		</div>
		<div class="p10">
			<select class="form-control input-sm" data-type="select" id="tablespace_instance_sel"></select>
		</div>
		<div class="m-panel-body" id="tablespace_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="tsp_list">查询表空间</li>
					<li data-action="log_tsp_list">DB2日志表空间</li>
				</ul>
			</div>
			<div class="table-div" id="table_space_div" style="height:300px"></div>
		</div>
	</div>

	<!-- 连接动态信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>连接动态信息</span>
		</div>
		<div class="m-panel-body" id="link_info_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="link_info_list">连接动态信息</li>
				</ul>
			</div>
			<div class="table-div" id="link_info_table" style="height:300px"></div>
		</div>
	</div>

	<!-- 缓冲区动态信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>缓冲区动态信息</span>
		</div>
		<div class="p10">
			<select class="form-control input-sm" data-type="select" id="buffer_instance_sel"></select>
		</div>
		<div class="m-panel-body" id="buffer_list_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="buffer_list">缓冲区动态信息</li>
				</ul>
			</div>
			<div class="table-div" id="buffer_list_table" style="height:300px"></div>
		</div>
	</div>

	<!-- 内存动态信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>内存动态信息</span>
		</div>
		<div class="p10">
			<select class="form-control input-sm" data-type="select" id="memory_instance_sel"></select>
		</div>
		<div class="m-panel-body" id="memory_list_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="memory_list">内存动态信息</li>
				</ul>
			</div>
			<div class="table-div" id="memory_list_table" style="height:300px"></div>
		</div>
	</div>

	<!-- 堆信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>堆信息</span>
		</div>
		<div class="p10">
			<select class="form-control input-sm" data-type="select" id="heap_instance_sel"></select>
		</div>
		<div class="m-panel-body" id="heap_list_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="heap_list">DB2排序堆动态信息</li>
				</ul>
			</div>
			<div class="table-div" id="heap_list_table" style="height:300px"></div>
		</div>
	</div>

	<!-- 锁信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>锁信息</span>
		</div>
		<div class="p10">
			<select class="form-control input-sm" data-type="select" id="lock_instance_sel"></select>
		</div>
		<div class="m-panel-body" id="lock_list_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="lock_list">锁动态信息</li>
				</ul>
			</div>
			<div class="table-div" id="lock_list_table" style="height:300px"></div>
		</div>
	</div>

	<!-- 应用程序信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>应用程序信息</span>
		</div>
		<div class="p10">
			<select class="form-control input-sm" data-type="select" id="app_instance_sel"></select>
		</div>
		<div class="m-panel-body" id="app_list_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="app_list">DB2应用程序信息</li>
				</ul>
			</div>
			<div class="table-div" id="app_list_table" style="height:300px"></div>
		</div>
	</div>

	<!-- 用户访问信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>用户访问信息</span>
		</div>
		<div class="m-panel-body" id="user_access_list_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="user_access_list">查询用户访问信息</li>
				</ul>
			</div>
			<div class="table-div" id="user_access_list_table" style="height:300px"></div>
		</div>
	</div>
</div>

<div class="monitor-tab-div" data-type="event"></div>

<script type="text/javascript">
$(document).ready(function (){
require([index_web_app_name + '/js/plugin/monitor/catagory/db2.js'] ,function (db2){

var urlParamObj = index_query_param_get()

view_init()

event_init()

index_form_init($("body"))

function view_init()
{
	urlParamObj.time = $("#query_time_label").text()
	db2.instance_sel(urlParamObj)
	tablespace_info()
}

function event_init()
{
	$("#instance_sel").change(function (){
		db2.instance_info_render()
	})

	$("#tablespace_instance_sel").change(function (){
		var listname
		$("#tablespace_div").find("li").each(function(){
			if($(this).attr("class") == "active"){
				listname = $(this).attr("data-action")
			}
		})
		db2[listname]()
	})

	$("#buffer_instance_sel").change(function (){
		db2.buffer_list()
	})

	$("#memory_instance_sel").change(function (){
		db2.memory_list()
	})

	$("#heap_instance_sel").change(function (){
		db2.heap_list()
	})

	$("#lock_instance_sel").change(function (){
		db2.lock_list()
	})

	$("#app_instance_sel").change(function (){
		db2.app_list()
	})
}

window.index_monitor_init = function ()
{
	view_init()
}

function tablespace_info(){
	var el_ul = $("#tablespace_div").find("ul")
	el_ul.find("li").unbind("click")
	el_ul.find("li").removeClass("active")
	el_ul.find("li").eq(0).addClass("active")
	el_ul.find("li").click(function (){
		$(this).siblings().removeClass("active")
		$(this).addClass("active")
		db2[$(this).attr("data-action")]()
	})
}


});
});
</script>